<template>
  <div>
    <div class="flex">
      <zbStore ref="storeRef" @initStore="initStore" @selStore="selStore" />
      <div class="flex1" style="width: 60%">
        <zbTable
          ref="tableRef"
          :api-fun="get_list"
          :store_code="store_code"
          @action="action"
          v-if="store_code"
        >
          <template #toolbar> </template>
        </zbTable>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="温馨提示" @ok="save">
      <p>确认清柜？</p>
    </a-modal>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    RestOutlined
  } from '@ant-design/icons-vue';
  import zbTable from '@/components/zbTable/storeCodeIndex.vue';
  import { get_list, clear_group_bound } from '@/api/warehouse/goods_bound';

  // 获取子组件
  const tableRef = ref(null);
  const router = useRouter();
  const { push } = useRouter();
  const optBtn = ref([]);
  const store_code = ref(null);
  const store_group_code = ref(null);
  const visible = ref(false);

  const initStore = (val) => {
    store_code.value = String(val.code);
  };
  const selStore = (val) => {
    store_code.value = String(val.code);
    tableRef.value.changeStoreCode(store_code.value);
  };

  /* 打开编辑弹窗 */
  const action = (data) => {
    if (data.action_data.type == 'detail') {
      //查看
      toDetail(data.row_data);
    } else if (data.action_data.type == 'draw') {
      //领货
      toDetail(data.row_data, 1);
    } else if (data.action_data.type == 'refund') {
      //退货
      toDetail(data.row_data, 2);
    } else if (data.action_data.type == 'clear') {
      //清柜
      store_group_code.value = data.row_data.code;
      visible.value = true;
    }
  };
  const save = () => {
    clear_group_bound({ store_group_code: store_group_code.value })
      .then((res) => {
        tableRef.value.reload();
        visible.value = false;
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const toDetail = (record, index) => {
    let r = router.currentRoute.value.path.split('/');
    let newUrl = '';
    if (index) {
      newUrl = `/${r[1]}/${r[2]}/detail${index}`;
    } else {
      newUrl = `/${r[1]}/${r[2]}/detail`;
    }
    push({
      path: newUrl,
      query: {
        code: record.id,
        store_group_code: record.code,
        store_code: record.store_code
      }
    });
  };
  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    tableRef.value.reload();
  };
</script>
